<template>
  <div class="detail">
    <div class="detail-top">
      <img :src="url1" alt="" />
      <span @click="goblack"></span>
    </div>
    <div class="classtime">
      <div class="ct-top"><span>已下课</span><span>Mitchell</span></div>
      <h2>African Safari Animals</h2>
      <p>奇妙的草原动物</p>
      <van-icon name="arrow-down" color="#888" size="18px" />
      <div class="ct-bottom">
        <h2>上课时间：今天19：30</h2>
        <button>去上课</button>
      </div>
    </div>
    <div class="preview">
      <div class="p-top">
        <span>课前预习</span>
        <span></span>
      </div>
      <div class="p-center">
        <van-nav-bar>
          <template #left>
            <img :src="url3" alt="" />
            <span>知识点</span>
          </template>
          <template #right>
            <img :src="url2" alt="" class="w-20px" />
          </template>
        </van-nav-bar>
        <van-nav-bar>
          <template #left>
            <img :src="url4" alt="" />
            <span>看绘本</span>
          </template>
          <template #right>
            <img :src="url2" alt="" class="w-20px" />
          </template>
        </van-nav-bar>
      </div>
      <div class="p-top">
        <span>课后作业</span>
        <span></span>
      </div>
      <div class="p-center">
        <van-nav-bar>
          <template #left>
            <img :src="url5" alt="" />
            <span>选一选</span>
          </template>
          <template #right>
            <img :src="url2" alt="" class="w-20px" />
          </template>
        </van-nav-bar>
        <van-nav-bar>
          <template #left>
            <img :src="url6" alt="" />
            <span>读单词</span>
          </template>
          <template #right>
            <img :src="url2" alt="" class="w-20px" />
          </template>
        </van-nav-bar>
      </div>
    </div>
    <!-- 课后报告 -->
    <div class="baogao">
      <div class="bg-top">
        <span>课后报告</span>
        <span></span>
        <img :src="url7" alt="" />
        <img :src="url8" alt="" class="yuan" />
        <img :src="url9" alt="" class="yuan1" />
      </div>
      <div class="bg-center">
        <img :src="url10" alt="" class="wite" />
        <img :src="url11" alt="" />
        <span>分享课后报告</span>
        <button>分享</button>
      </div>
    </div>
  </div>
</template>
<script>
// 引入图片
import url1 from "../../assets/images/图层 3 (1).png";
import url2 from "../../assets/images/组 11(1).png";
import url3 from "../../assets/images/组 3(3).png";
import url4 from "../../assets/images/组 5(2).png";
import url5 from "../../assets/images/组 6(2).png";
import url6 from "../../assets/images/组 7(2).png";
import url7 from "../../assets/images/组 12 (1).png";
import url8 from "../../assets/images/矩形 8.png";
import url9 from "../../assets/images/椭圆 10 拷贝 2.png";
import url10 from "../../assets/images/椭圆 17 拷贝.png";
import url11 from "../../assets/images/椭圆 17.png";
// 引入插件vant
import { NavBar, Icon } from "vant";
// 引入路由
import { useRouter } from "vue-router";
export default {
  // 组件注册
  components: {
    vanNavBar: NavBar,
    vanIcon: Icon,
  },
  setup() {
    // goblack
    const router = useRouter();
    const goblack = () => {
      router.go(-1);
    };
    return {
      goblack,
      url1,
      url2,
      url3,
      url4,
      url5,
      url6,
      url7,
      url8,
      url9,
      url10,
      url11,
    };
  },
};
</script>
<style lang="less" scoped>
.detail {
  .detail-top {
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    span {
      position: absolute;
      top: 60px;
      left: 18px;
      width: 15px;
      height: 15px;
    }
  }
  .classtime {
    // border: 1px solid black;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), -1px -1px 1px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin: 0 15px;
    padding: 0 30px;
    position: relative;
    .ct-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #888888;
      span {
        margin-top: 5px;
      }
    }
    h2 {
      font-size: 18px;
      font-weight: 900;
      //   margin-top: 15px;
      line-height: 40px;
    }
    p {
      font-size: 17px;
      color: #888888;
      margin-bottom: 15px;
      font-weight: 900;
    }
    .van-icon {
      position: absolute;
      top: 31%;
      right: 20px;
    }
    .ct-bottom {
      border-top: 2px dashed #888888;
      h2 {
        font-size: 18px;
        font-weight: 900;
        line-height: 40px;
      }
      button {
        width: 100%;
        line-height: 50px;
        background-color: dodgerblue;
        color: white;
        border-radius: 30px;
        border: none;
        font-size: 18px;
        margin-bottom: 20px;
      }
    }
  }
  .preview {
    margin: 20px 15px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), -1px -1px 1px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 20px;
    .p-top {
      font-size: 18px;
    }
    .p-center {
      .van-nav-bar {
        background-color: #f5f5f5;
        border-radius: 10px;
        margin: 20px;
        /deep/.van-nav-bar__content {
          height: 70px;
          img {
            width: 40px;
            height: 40px;
          }
          .w-20px {
            width: 20px;
            height: 20px;
          }
          span {
            margin-left: 10px;
            font-weight: 900;
          }
        }
      }
    }
  }
  .baogao {
    margin: 20px 15px;
    padding: 20px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), -1px -1px 1px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    overflow: hidden;
    .bg-top {
      font-size: 16px;
      font-weight: 900;
      position: relative;
      img {
        position: absolute;
        top: -22px;
        right: 20px;
        width: 55px;
        height: 25px;
      }
      .yuan {
        position: absolute;
        top: -44px;
        right: 20px;
        width: 9px;
        height: 30px;
        z-index: 10;
      }
      .yuan1 {
        position: absolute;
        top: -22px;
        right: 19px;
        width: 11px;
        height: 11px;
      }
    }
    .bg-center {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 900;
      margin-top: 20px;
      position: relative;
      img {
        width: 50px;
        height: 50px;
        position: absolute;
        left: -35px;
        top: 50%;
        transform: translateY(-65%);
      }
      .wite {
        width: 20px;
        height: 20px;
        position: absolute;
        left: -21px;
        top: 50%;
        transform: translateY(-95%);
        z-index: 1;
      }
      button {
        width: 75px;
        line-height: 30px;
        border-radius: 20px;
        color: white;
        border: 0;
        background-color: #dfdfdf;
      }
    }
  }
}
</style>
